<template>
	<view>
		 <u-swiper :autoplay="true" :interval="2000" v-for="(color, index) in bg" :key="index" :style="{ backgroundColor: color }">
		    <!-- <u-swiper-item v-for="(color, index) in colors" :key="index" :style="{ backgroundColor: color }"></u-swiper-item> -->
		  </u-swiper>
		  <u-list>
		  			<uni-card :is-shadow="true"  :title="roomData.roomNo" >
		  				<u-list-item>
							<view class="card-content">
							<view class="card-avatar" :style="{backgroundColor:bg}"></view>
							
							   <view >
								<view>已入住人员信息</view>
								 <view >姓名：</view>
								 <view>所在学院：{{campous}}</view>
								 </view>
							</view>
							
							
							
		  						  
		  			</u-list-item></uni-card>
					<u-list-item>
						<uni-card>
							<view>
							<uni-calendar 
							ref="calendar"
							:insert="false"
							:range="true"
							@confirm="hanleConfirm"
							 >
							
							</uni-calendar>
							<text @click="open" class="text">选择入住的日期</text>
							<text class="text">{{startTime}}-{{endingTime}}</text>
							
							</view>
						</uni-card>
					</u-list-item>
					</u-list>
					
					<button class="button" @click="book">预定</button>
		  		
	</view>
</template>

<script>
	import * as dd from 'dingtalk-jsapi';
	export default {
		data() {
			return {
				bg:['#55aaff'],
				roomData:[],
				room:[],
				name:'',
				campous:'信息学院',
				model:'range',
				show:'false',
				startTime:'',
				endingTime:'',
				userId:'',
			}
		},
		methods: {
			
			open() {
				this.$refs.calendar.open();
			},
			hanleConfirm(e){
				
				this.startTime=e.range.before
				this.endingTime=e.range.after
			},book(){
				const token = 'eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6ImEyNzQxNTlmLTE4NGUtNDQ3Mi04ZmQ0LTQzNGMwMDFhODViZSJ9.Aj_IYFPEOtLpqlcEUxxi4XQkHCFvGTjPyrsTWJ6X-GyY25IsGVIWXCNU0g4zGMV8pm3hCgACtc1NsIqw3tnPDg';
			uni.request({
				url:'http://localhost:8088/system/bill',
				method:'POST',
				data:{
					name:this.names,
					roomNo:this.roomData.roomNo,
					userId:this.userId
					
				},
				header:{ 'Content-Type': 'application/json',
					'Authorization':'Bearer'+token},
				
			})
			uni.$u.toast('预定成功');
			  setTimeout(() => {
			    // 跳转页面
			    window.location.href = '/pages/index/index';
			  }, 2000); // 延迟2秒后跳转
		}
		},
		onLoad(){
		  this.roomData= uni.getStorageSync('roomData');
		 dd.getAuthCode({
		 				corpId: 'ding0a40cdce33c8deb624f2f5cc6abecb85',
		 				success: (res) => {
		 					    const {code}=res;
		 						alert(code)
		 						uni.request({
		 							url:`http://localhost:8088/system/dingding/v2/user/${code}`,
		 							success:(res)=> {
		 								const{name}=res.data.result;
		 								const{userid}=res.data.result
		 								this.names=name;
										this.userId=userid
		 								
		 							}
		 							
		 						})
		 								  },
		 			    fail: () => {uni.request({
		 							url:'http://localhost:8088/system/dingding/login',
		 							method:'GET'
		 						})},
		 				complete: () => {},
		 				});
		 uni.request({
		         url: `http://localhost:8088/system/room/getRoom/${this.roomData.roomNo}`,
		         method: 'GET',
		         success: (res) => {
		          
		           // 处理返回的房间数据
		           // ...
		 		  this.room=res.data.data;
		         },
		         fail: (err) => {
		           
		         }
		       });
		  // 获取房间数据后操作...
		},
	
		
	}
</script>

<style>
.button {
    background-color: #55aaff;
	border-radius: 20px; /* 设置边角的弧度 */
	padding: 10px 20px; 
	right: 20rpx;
    position: fixed;
    width: 25%;
    bottom: 0;
    height: 55px;
	border: none; 
	color: #fff;
	
}
.text{
	display: flex;
	flex-direction: column;
}
</style>
